source map 怎么用

解决开发与实际运行代码不一致，帮助我们 debugger 到原始代码的技术

关键字

cheap: 只看行，不看列，无论生产还是开发都会使用这个，列信息是没有意义的 module: 不可忽略，我们需要定位到原始的 jsx ts 原始代码，而不是编译后的 source-map: 需要 .map 文件，故不可忽略 eval：

• eval 包裹模块代码，eval 模式是使用 eval 将 webpack 中每个模块包裹，然后在模块末尾添加模块来源//# souceURL， 依靠 souceURL 找到原始代码的位置
• eval 模式有点特殊， 它和其他模式不一样的地方是它依靠 sourceURL 来定位原始代码， 而其他所有选项都使用.map 文件的方式来定位

例子

eval-source-map 生成 sourcemap

webpackJsonp([1],[
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  function(module,exports,__webpack_require__){
    eval(
      ...
      //# sourceMappingURL=data:application/json;charset=utf-8;base64,...
    )
  },
  ...
]);

cheap-module-eval-source-map 不包含列 cheap-eval-source-map 无法看到真正的源码

常用配置

开发环境使用：cheap-module-eval-source-map 生产环境使用：cheap-module-source-map

生产环境不用 eval, 这会让文件变得极大